<template>
	<view>
		<!-- <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="1000">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
		
		<scroll-view :scroll-y="true">
			<view>1</view>
			<view>2</view>
			<view>3</view>
			<view>4</view>
		</scroll-view>
		
		<scroll-view class="xscroll" :scroll-x="true"> 
			<view>1</view>
			<view>2</view>
			<view>3</view>
			<view>4</view>
		</scroll-view>-->
		<!-- <movable-area>
			<movable-view direction="all" inertia :damping="10"></movable-view>
		</movable-area> -->
		<!-- <icon type="download" size="30"></icon>
		<icon type="clear" color="red"></icon>
		<icon type="success"></icon>
		<text>我是一段文本</text>
		<progress percent="30" :show-info="true" border-radius="20" stroke-width="10" activeColor="orange" backgroundColor="blue"></progress> -->
		<!-- <button size="mini" type="default" loading>点击按钮</button>
		<button size="mini" type="primary" plain>点击按钮</button>
		<button size="mini" type="warn" disabled>点击按钮</button>
		<checkbox-group>
			<label>篮球：</label><checkbox value="篮球"></checkbox>
			<label>足球：</label><checkbox value="足球"></checkbox>
			<label>乒乓球：</label><checkbox value="乒乓球"></checkbox>
		</checkbox-group>
		<input  type="idcard" placeholder="请输入密码"/> -->
		<!-- <picker mode = selector :range="['apple','banana','orange','pear']">
			<text>请选择水果</text>
		</picker>
		<picker mode = multiSelector :range="[[1,2,3,4],['apple','banana','orange','pear'],['a','b','c']]">
			<text>请选择水果</text>
		</picker>
		<picker mode = "time">
			<text>请选择时间</text>
		</picker>
		<picker mode = "date" fields="year">
			<text>请选择日期</text>
		</picker>
		<picker mode = "region" fields="year">
			<text>请选择地址</text>
		</picker>
		<radio-group>
			<radio>男</radio>
			<radio>女</radio>
		</radio-group> -->
		<!-- <slider block-size="12"></slider>
		<switch></switch>
		<textarea></textarea>
		<image src="/static/images/b1.jpg"></image>
		<image class="img1" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F86f8eda0-7ed3-424b-b6a8-9a8354db8cca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706931255&t=d03be845969b005f4264b23b0f100865"></image> -->
		 <!-- <uni-calendar 
		    :insert="true"
		    :lunar="true" 
		    :start-date="'2019-3-2'"
		    :end-date="'2019-5-20'"
		    @change="change"
		     /> -->
		<!-- <view>{{data1}}</view>
		<view>{{data2 + 10}}</view>
		<view>{{data3.join('-')}}</view>
		<view>{{data2>10?'正确':'不正确'}}</view>
		
		<image :src="src"></image> -->
		<!-- <view v-if="data2>10" class="v1"></view>
		<view v-show="data2>10" class="v1"></view>
		
		<view v-if="data2<10">一位数</view>
		<view v-else-if="data2<100">二位数</view>
		<view v-else>多位数</view> -->
		
		<!-- <view v-for="(item,index) in data3">{{item}}---{{index}}</view>
		
		<view v-for="item in data4">
			<view>
				<image :src="item.img"></image>
			</view>
			<view>
				<view>{{item.title}}</view>
				<view>{{item.msg}}</view>
				<view>{{item.stat}}</view>
			</view>
		</view> -->
		<!-- <button @click="fn">点击</button> -->
		<!-- 通过点击让物体显示隐藏 -->
		<!-- <button @click="showHide">{{isShow?'隐藏':'显示'}}</button>
		<view class="v1" v-show="isShow"></view> -->
		
		<view class="tip-box">
			<view @click="sel(i)" :class="selected==i?'active':''"  v-for="(v,i) in tip">{{v}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() { //管理数据
			return {
				selected:-1,
				isShow:true,
				data1:'数据1',
				data2:122,
				data3:['apple','banana','pear','d'],
				src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F86f8eda0-7ed3-424b-b6a8-9a8354db8cca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706931255&t=d03be845969b005f4264b23b0f100865',
				data4:[
					{
						img:'/static/images/wode.png',
						title:'剧本杀1',
						msg:'这个一个6人的剧本杀',
						stat:9
					},
					{
						img:'/static/images/wode.png',
						title:'剧本杀2',
						msg:'这个一个6人的剧本杀',
						stat:9
					},
					{
						img:'/static/images/wode.png',
						title:'剧本杀3',
						msg:'这个一个6人的剧本杀',
						stat:9
					}
				],
				tip:['独家','限定','4人','校园','恐怖','灵异','玄幻']
			}
		},
		methods: { //管理方法
			sel(index){
				console.log(index)
				this.selected=index;
			},
			fn(){
				console.log(1)
			},
			showHide(){
				this.isShow=!this.isShow
			}
		}
	}
</script>

<style>
.tip-box{
	display: flex;
	flex-wrap: wrap;
}
.tip-box view{
	padding: 14rpx 20rpx;
	border-radius: 10rpx;
	background: #ccc;
	margin: 20rpx;
}
.tip-box .active{
	background: #399;
	color: #fff;
}
.v1{
	width: 300rpx;
	height: 300rpx;
	background: red;
}
.img1{
	width: 300rpx;
	height: 300rpx;
	display: flex;
	align-content: space-around;
}
textarea{
	border: 1px solid #eee;
}
input{
	border: 1px solid #eee;
}
movable-area{
	width: 700rpx;
	height: 300rpx;
	background: pink;
}
movable-view{
	width: 100rpx;
	height: 100rpx;
	background: blue;
}
.xscroll{
	width: 750rpx;
	height: 200rpx;
	border: 1px solid red;
	white-space: nowrap;
}
.xscroll view{
	width: 700rpx;
	height: 150rpx;
	border: 1px solid blue;
	display: inline-block;
}
scroll-view view{
	width: 700rpx;
	height: 180rpx;
	border: 1px solid blue;
}
scroll-view{
	width: 750rpx;
	height: 200rpx;
	border: 1px solid red;
}
.swiper,.swiper-item{
	width: 750rpx;
	height: 300rpx;
}
.uni-bg-red{
	background: red;
}
.uni-bg-green{
	background: green;
}
.uni-bg-blue{
	background: blue;
}
</style>
